<extend name="Layout/ins_page" />
<block name="content">
	<style>
		.tag_list {
			padding-left: 15px;
			padding-right: 15px;
			padding-bottom: 20px;
		}
		.layui-tab-title li {
			min-width: auto;
		}
	</style>
	{:W('PageHeader/search',array('name'=>'客户'))}
	<div class="oprator-panel">
		<a class="btn" onclick="import_contact();">导入</a>
		<div class="split"></div>
		<a class="btn" id="btn_add">新建</a>
		<span class="l">|</span>
		<a class="btn btn-del" id="btn_del" >删除</a>
	</div>
	<div class="layui-tab layui-tab-brief" id="select_letter">
		<ul class="layui-tab-title">
			<li>
				全部
			</li>
			<li>
				A
			</li>
			<li>
				B
			</li>
			<li>
				C
			</li>
			<li>
				D
			</li>
			<li>
				E
			</li>
			<li>
				F
			</li>
			<li>
				G
			</li>
			<li>
				H
			</li>
			<li>
				I
			</li>
			<li>
				J
			</li>
			<li>
				K
			</li>
			<li>
				L
			</li>
			<li>
				M
			</li>
			<li>
				N
			</li>
			<li>
				O
			</li>
			<li>
				P
			</li>
			<li>
				Q
			</li>
			<li>
				R
			</li>
			<li>
				S
			</li>
			<li>
				T
			</li>
			<li>
				U
			</li>
			<li>
				V
			</li>
			<li>
				W
			</li>
			<li>
				X
			</li>
			<li>
				Y
			</li>
			<li>
				Z
			</li>
			<li>
				#
			</li>
		</ul>
	</div>
	<div class="ul-table">
		<form method="post" name="form_data" id="form_data">
			<ul>
				<li class="thead">
					<span class="col-2 x-checkbox">
						<input type="checkbox" name="id[]" value="{$vo.id}" class="toggle-select-all" data="id[]">
					</span>
					<span class="col-16 grow-2">客户名称</span>
					<span class="col-8 grow-1 hidden-s">联系人</span>
					<span class="col-12 grow-1 hidden-s">办公电话</span>
					<span class="col-12 grow-1">手机</span>
				</li>
				<empty name="list">
					<li class="no-data">
						没找到数据
					</li>
					<else/>
					<foreach name="list" item="vo">
						<li class="tbody" letter="{$vo.letter}">
							<span class="col-2 x-checkbox">
								<input type="checkbox" name="id[]" value="{$vo.id}">
							</span>
							<span class="col-16 grow-2"><a href="{:U('read',array('id'=>$vo['id']))}">{$vo.name}</a></span>
							<span class="col-8 grow-1 autocut hidden-s">{$vo.contact}&nbsp;</span>
							<span class="col-12 grow-1 hidden-s">{$vo.office_tel}&nbsp;</span>
							<span class="col-12 grow-1"><a href="tel:{$vo.mobile_tel}">{$vo.mobile_tel}</a></span>
						</li>
					</foreach>
				</empty>
			</ul>
			<notempty name="list">
				<div class="pagination">
					{$page}
				</div>
			</notempty>
		</form>
	</div>
</block>
<block name="js">
	<script type="text/javascript">
		layui.use(['global', 'element'], function() {
			var $ = layui.jquery;
			set_return_url(null);

			$('#select_letter li').on('click', function() {
				var search_letter = trim(this.innerText);

				if (search_letter == '全部') {
					$('#form_data li.tbody').show();
				} else {
					$('#form_data li.tbody').hide();
					$('#form_data li.tbody').each(function() {
						console.log(this);
						var key = $(this).attr('letter').substr(0, 1);
						if (search_letter == key) {
							$(this).show();
						}
					});
				}
			});

			$('.tag_list li').click(function(event) {
				event.stopPropagation();
			});

			$("li.tbody").click(function() {
				$(".table input:checkbox").attr("checked", false);
				$(".tag_list input[name='tag[]']").attr("checked", false);
				str = trim($(this).find(".tag").text());

				strs = str.split(",");
				for ( i = 0; i < strs.length; i++) {
					$(".tag_list input[name='tag[]'][value='" + strs[i] + "']").prop("checked", true);
				}
			});

			$('.tag_list input').on('change', function(event) {
				if (($('.tag_list input:checked').length == 0) && ($(".tag_list input[name='new_tag']").val() == "")) {
					$(".cmd").show();
					$(".apply").hide();
				} else {
					$(".cmd").hide();
					$(".apply").show();
				}
			});

			$("#btn_add").on('click', function() {
				window.open("{:U('add')}", "_self");
			});

			$('#btn_del').on('click', function() {
				if ($("input[name='id[]']:checked").length == 0) {
					layer.msg('请选择要删除的数据');
					return false;
				}
				//信息框-例2
				layer.msg('确定要删除吗?', {
					time : 0,
					btn : ['确定', '取消'],
					yes : function(index) {
						var vars = $("#form_data").serialize();
						send_ajax("{:U('del')}", vars, function(ret) {
							if (ret.status) {
								layer.msg(ret.info, function() {
									location.reload(true);
								});
							}
						});
					},
					no : function(index) {
						layer.close(index);
					}
				});
			});

			$('#btn_select_pid').on('click', function() {
				winopen("{:U('winpop')}", 560, 470);
			});
		});

		function apply() {
			if ($("#form_data .ul-table input:checked").length == 0) {
				ui_error("请选择数据");
				return false;
			}
			send_form("form_data", "{:U('set_tag')}", "{:U('index')}");
		}

		function create_new_tag() {
			$(".cmd").hide();
			$(".new_tag").css("display", "block");
			$(".apply").show();
		}

		function export_contact() {
			window.open("{:U('export')}", "_blank");
			return false;
		}

		function import_contact() {
			window.open("{:U('import')}", "_self");
			return false;
		}

		function manage_tag() {
			window.open("{:U('tag_manage')}", "_self");
			return false;
		}

	</script>
</block>